<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
        }
        p{
            font-weight: 700;
        }
    </style>
</head>
<body>
    <div>
        <p>传智教育年会抽奖</p>
        <h1>一等奖：<span class="one"></span></h1>
        <h3>二等奖：<span class="two"></span></h3>
        <h5>三等奖：<span class="three"></span></h5>
    </div>
    <script>
        const personArr = ['周杰伦', '刘德华', '周星驰', '范老师', '张学友']
        // const h1 = document.querySelector('.one')
        // const h3 = document.querySelector('.two')
        // const h5 = document.querySelector('.three')
        // // i,j,k为选中的数组索引 
        // let i = Math.floor(Math.random()*personArr.length)
        // h1.innerHTML= personArr[i]
        // h1.style.color = 'red'
        // personArr.splice(i,1)

        // let j = Math.floor(Math.random()*personArr.length)
        // h3.innerHTML= personArr[j]
        // personArr.splice(j,1)

        // let k = Math.floor(Math.random()*personArr.length)
        // h5.innerHTML= personArr[k]
        // personArr.splice(k,1)
        // console.log(personArr)




        // 方法二 使用for语句
        let arr = ['one','two','three']
        for(let i =0 ; i<arr.length;i++){
            const span = document.querySelector('.'+ arr[i])
            let lan = Math.floor(Math.random()*personArr.length)
            span.innerHTML = personArr[lan]
            personArr.splice(lan,1)
        }
        console.log(personArr)
        
    </script>
</body>
</html>